<template>
  <div class="container">
    <el-form
      :model="form"
      inline
      class="search-form"
    >
      <el-form-item label="文档名称">
        <el-input v-model="form.name" />
      </el-form-item>

      <FormSearchButton
        layout="add, import, export, downloadTemplate"
        @search="handleSearch"
        @reset="handleReset"
        @add="handleAdd"
        @import="handleImport"
        @export="handleExport"
        @downloadTemplate="handleDownloadTemplate"
      />
    </el-form>

    <div class="content-container">
      <el-radio-group v-model="form.collection">
        <el-radio
          v-for="(item, index) in collectionList"
          :key="index"
          :value="item.collectionName"
        >
          {{ item.collectionName }}
        </el-radio>
      </el-radio-group>
      <TablePagination
        :dataList="dataList"
        :headList="headList"
        :showSelection="false"
        :showPage="false"
        @edit="handleEdit"
        @delete="handleDelete"
        @detail="handleDetail"
      />
    </div>

    <PublicModal
      v-if="modalVisible"
      v-model="modalVisible"
      :type="modalType"
      title="文档"
      @close="handleClose"
    >
      <MenuModal :selectedRow="selectedRow" :type="modalType" />
    </PublicModal>

    <DeleteModal
      v-model="deleteModelVisible"
      :type="deleteType"
      @confirm="handleConfirmDelete"
    />
  </div>
</template>

<script setup>
import { findCollection, findDocument } from '@w/apis/database'

import { documentConfig } from '../config'

import MenuModal from './MenuModal.vue'

import DeleteModal from '~comp/DeleteModal.vue'
import FormSearchButton from '~comp/FormSearchButton.vue'
import PublicModal from '~comp/PublicModal.vue'
import TablePagination from '~comp/TablePagination.vue'
import { usePageFetchHook } from '~hooks/usePageFetchHook'
import { uploadExcelFile } from '~utils/file'

const form = reactive({
  name: '',
  collection: ''
})
const headList = documentConfig.headList

const {
  dataList,
  modalVisible,
  modalType,
  selectedRow,
  deleteType,
  deleteModelVisible,
  handleAdd,
  handleEdit,
  handleDelete,
  handleDetail,
  handleClose
} = usePageFetchHook()

const collectionList = ref([])
const getCollectionList = async() => {
  const { data } = await findCollection()
  collectionList.value = data
  form.collection = data.length ? data[0].collectionName : ''
}

const getDocumentList = async() => {
  const { data } = await findDocument(form.collection)
  dataList.value = data
}

const handleSearch = () => {
  getDocumentList()
}

const handleReset = () => {
  form.name = ''
  getDocumentList()
}

const handleImport = async() => {
  const file = await uploadExcelFile()
  console.log('🚀 ~ handleImport ~ file:', file)
}
const handleExport = () => {
  console.log('handleExport!')
}
const handleConfirmDelete = () => {
  console.log('单条删除', selectedRow)
  // 删除成功
  // fetchData()
  // deleteModelVisible.value = false
  // selectedRow.value = null
  setTimeout(() => {
    deleteModelVisible.value = false
    selectedRow.value = null
  }, 500)
}
const handleDownloadTemplate = () => {
  console.log('handleDownloadTemplate!')
}

onMounted(() => {
  getCollectionList()
})

watch(() => form.collection, () => {
  getDocumentList()
})
</script>

<style lang="scss" scoped>
.content-container {
  display: flex;
  height: calc(100% - 92px);

  .el-radio-group {
    align-items: flex-start;
    padding: 20px;
    margin-right: 20px;
    width: 200px;
    background-color: #fff;
    border-radius: var(--border-radius);
    flex-direction: column;

    .el-radio {
      margin-right: 0;
    }
  }

  .table-pagination {
    padding: 20px;
    width: calc(100% - 220px);
    background-color: #fff;
    border-radius: var(--border-radius);
  }
}
</style>
